<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>Flex底部对齐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            display: flex;
            width: 640px;
            margin: 50px;
            border: 1px solid #f00;

            justify-content: space-between;
            flex-wrap: wrap;
        }

        .inner {
            width: 140px;
            height: 100px;
            margin-bottom: 20px;
            /* margin-right: calc((640px - 140px * 4) / 3); */
            font-size: 26px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            background-color: #ff9000;
        }

        /* .inner:nth-child(4n){
            margin-right: 0;
        } */

        .inner:nth-child(-n + 2){
            /* 
                n 代表从0开始的自然数 ... infinite
                n 不支持写在后边
                nth-child() 根据位置选取某一类元素，有效序数从 1 开始
            */
            background-color: #00f;
        }

        .inner:nth-last-child(-n + 2){
            height: 0;
            line-height: 0;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>

    <!-- 
        1. 给元素添加 margin 属性，固定值
        2. 给元素添加空元素，在flex布局中，空元素只要有宽，就会占据布局位置
            补充 列数-2 个空元素
    -->
    <script type="text/javascript">
        
    </script>
</body>
</html>